<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品类别列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!--新增一级分类模态框-->
        <el-dialog
                title="添加一级分类"
                :visible.sync="addProView"
                width="40%">
            <el-form :model="addPro" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="一级分类" prop="productTypeName">
                    <el-input v-model="addPro.productTypeName" placeholder="一级分类名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="addProType('ruleForm')">提交</el-button>
                    <el-button @click="addProView = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!--修改一级分类模态框-->
        <el-dialog
                title="修改一级分类"
                :visible.sync="modProView"
                width="40%">
            <el-form :model="modPro" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="一级分类" prop="productTypeName">
                    <el-input v-model="modPro.productTypeName" placeholder="一级分类名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="modProType('ruleForm')">提交</el-button>
                    <el-button @click="modProView = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!--新增二级分类模态框-->
        <el-dialog
                title="添加二级分类"
                :visible.sync="addGoodsView"
                width="40%">
            <el-form :model="addGoods" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="二级分类" prop="goodsTypeName">
                    <el-input v-model="addGoods.goodsTypeName" placeholder="二级分类名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="addGoodsType('ruleForm')">提交</el-button>
                    <el-button @click="addGoodsView = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!--修改二级分类模态框-->
        <el-dialog
                title="修改二级分类"
                :visible.sync="modGoodsView"
                width="40%">
            <el-form :model="modGoods" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="二级分类" prop="goodsTypeName">
                    <el-input v-model="modGoods.goodsTypeName" placeholder="二级分类名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="modGoodsType('ruleForm')">提交</el-button>
                    <el-button @click="modGoodsView = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!--新增品牌模态框-->
        <el-dialog
                title="添加品牌"
                :visible.sync="addBrandView"
                width="40%">
            <el-form :model="addBrand" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="品牌名称" prop="brandName">
                    <el-input v-model="addBrand.brandName" placeholder="品牌名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="addBrandType('ruleForm')">提交</el-button>
                    <el-button @click="addBrandView = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!--修改品牌模态框-->
        <el-dialog
                title="修改品牌"
                :visible.sync="modBrandView"
                width="40%">
            <el-form :model="modBrand" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="品牌名称" prop="brandName">
                    <el-input v-model="modBrand.brandName" placeholder="品牌名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="modBrandType('ruleForm')">提交</el-button>
                    <el-button @click="modBrandView = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>


        <!--页面内容-->
        <template>
            <el-tabs type="border-card">
                <el-tab-pane label="一级分类">
                    <div style="float: left;margin-top: 15px">
                        <el-button type="primary" plain @click="addProView = true">新增分类</el-button>
                        <el-button type="danger" plain @click="removeAll1">批量删除</el-button>
                    </div>
                    <el-table
                            ref="multipleTable"
                            :data="productTypeList"
                            tooltip-effect="dark"
                            style="width: 100%"
                            @selection-change="proSelectionChange">
                        <el-table-column
                                type="selection"
                                width="55">
                        </el-table-column>
                        <el-table-column
                                label="类别ID"
                                width="60">
                            <template slot-scope="scope">{{ scope.row.productTypeId }}</template>
                        </el-table-column>
                        <el-table-column
                                label="类别名称"
                                width="180">
                            <template slot-scope="scope">{{ scope.row.productTypeName }}</template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button
                                        size="mini"
                                        @click="proTypeEdit(scope.row)">编辑</el-button>
                                <el-button
                                        size="mini"
                                        type="danger"
                                        @click="proTypeDelete(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="二级分类">
                    <div style="float: left;margin-top: 15px">
                        <el-button type="primary" plain @click="addGoodsView = true">新增分类</el-button>
                        <el-button type="danger" plain @click="removeAll2">批量删除</el-button>
                    </div>
                    <el-table
                            ref="multipleTable"
                            :data="goodsTypeList"
                            tooltip-effect="dark"
                            style="width: 100%"
                            @selection-change="goodsSelectionChange">
                        <el-table-column
                                type="selection"
                                width="55">
                        </el-table-column>
                        <el-table-column
                                label="类别ID"
                                width="60">
                            <template slot-scope="scope">{{ scope.row.goodsTypeId }}</template>
                        </el-table-column>
                        <el-table-column
                                label="类别名称"
                                width="180">
                            <template slot-scope="scope">{{ scope.row.goodsTypeName }}</template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button
                                        size="mini"
                                        @click="goodsTypeEdit(scope.row)">编辑</el-button>
                                <el-button
                                        size="mini"
                                        type="danger"
                                        @click="goodsTypeDelete(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="品牌管理">
                    <div style="float: left;margin-top: 15px">
                        <el-button type="primary" plain @click="addBrandView = true">新增品牌</el-button>
                        <el-button type="danger" plain @click="removeAll3">批量删除</el-button>
                    </div>
                    <el-table
                            ref="multipleTable"
                            :data="brandList"
                            tooltip-effect="dark"
                            style="width: 100%"
                            @selection-change="brandSelectionChange">
                        <el-table-column
                                type="selection"
                                width="55">
                        </el-table-column>
                        <el-table-column
                                label="品牌ID"
                                width="60">
                            <template slot-scope="scope">{{ scope.row.brandId }}</template>
                        </el-table-column>
                        <el-table-column
                                label="品牌名称"
                                width="180">
                            <template slot-scope="scope">{{ scope.row.brandName }}</template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button
                                        size="mini"
                                        @click="brandEdit(scope.row)">编辑</el-button>
                                <el-button
                                        size="mini"
                                        type="danger"
                                        @click="brandDelete(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
        </template>
    </div>
</template>

<script>
    export default {
        name: "Brand",
        data(){
            return{
                brandList:[],
                productTypeList:[],
                goodsTypeList:[],
                addProView:false,
                modProView:false,
                addGoodsView:false,
                modGoodsView:false,
                addBrandView:false,
                modBrandView:false,
                proIds:'',
                goodsIds:'',
                brandIds:'',
                addPro:{
                    productTypeName:''
                },
                modPro:{},
                addGoods:{
                    goodsTypeName:''
                },
                modGoods:{},
                addBrand:{
                    brandName:''
                },
                modBrand:{},
                rules: {
                    productTypeName: [
                        {required: true, message: '请输入一级分类名称', trigger: 'blur'}
                    ],
                    goodsTypeName: [
                        {required: true, message: '请输入二级分类名称', trigger: 'blur'}
                    ],
                    brandName: [
                        {required: true, message: '请输入品牌名称', trigger: 'blur'}
                    ],
                }
            }
        },
        created(){
            this.findAll();
        },
        methods:{
            findAll(){
                let url = this.$baseUrl+"/goods/findAllTypes";
                this.axios.get(url).then((res)=> {
                    this.brandList = res.data.data.brandList;
                    this.productTypeList = res.data.data.productTypeList;
                    this.goodsTypeList = res.data.data.goodsTypeList;
                })
            },

            //复选框返回id值
            proSelectionChange(val) {
                this.multipleSelection = val;
                let ids ="";
                val.forEach((item,index)=>{
                    ids +="," + item.productTypeId;
                })
                ids = ids.substring(1);
                this.proIds = ids;
                console.log(this.proIds)
            },
            goodsSelectionChange(val) {
                this.multipleSelection = val;
                let ids ="";
                val.forEach((item,index)=>{
                    ids +="," + item.goodsTypeId;
                })
                ids = ids.substring(1);
                this.goodsIds = ids;
                console.log(this.goodsIds)
            },
            brandSelectionChange(val) {
                this.multipleSelection = val;
                let ids ="";
                val.forEach((item,index)=>{
                    ids +="," + item.brandId;
                })
                ids = ids.substring(1);
                this.brandIds = ids;
                console.log(this.brandIds)
            },


            //添加一级分类
            addProType(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let url = this.$baseUrl+"/productType/add";
                        this.axios.post(url,JSON.stringify(this.addPro)).then((res)=>{
                            if(res.data.code==200){
                                this.$message({
                                    message: res.data.message,
                                    type: 'success',
                                });
                            }
                            this.findAll();
                            this.$refs[formName].resetFields();
                            this.addProView = false;
                        })
                    } else {
                        console.log('提交失败，请检查表单数据是否符合要求!!');
                        return false;
                    }
                });
            },
            //修改一级分类
            proTypeEdit(row) {
                this.axios.get(this.$baseUrl+"/productType/findById",{
                    params:{
                        productTypeId:row.productTypeId
                    }
                }).then((res)=>{
                    if(res.data.code==200){
                        this.modPro = res.data.data;
                    }
                    this.modProView = true;
                })
            },
            modProType(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let url = this.$baseUrl+"/productType/modify";
                        this.axios.put(url,JSON.stringify(this.modPro)).then((res)=>{
                            if(res.data.code==200){
                                this.$message({
                                    message: res.data.message,
                                    type: 'success',
                                });
                            }
                            this.findAll();
                            this.$refs[formName].resetFields();
                            this.modProView = false;
                        })
                    } else {
                        console.log('提交失败，请检查表单数据是否符合要求!!');
                        return false;
                    }
                });
            },
            //批量删除一级分类
            removeAll1(){
                if(!this.proIds==''){
                    if(confirm('确认要删除吗？')){
                        this.axios.delete(this.$baseUrl+"/productType/removeAll",{
                            params:{
                                ids:this.proIds,
                            }
                        }).then((res)=>{
                            if(res.data.code==200){
                                this.$message({
                                    message: res.data.message,
                                    type: 'success',
                                });
                                this.findAll();
                            }
                        })
                    }else{
                        this.proIds = "";
                    }

                }else{
                    this.$message.error("请选择至少一条信息")
                }

            },
            //单个删除
            proTypeDelete(row){
              this.proIds = row.productTypeId;
              console.log(this.proIds)
              this.removeAll1();
            },


            //添加二级分类
            addGoodsType(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let url = this.$baseUrl+"/goodsType/add";
                        this.axios.post(url,JSON.stringify(this.addGoods)).then((res)=>{
                            if(res.data.code==200){
                                this.$message({
                                    message: res.data.message,
                                    type: 'success',
                                });
                            }
                            this.findAll();
                            this.$refs[formName].resetFields();
                            this.addGoodsView = false;
                        })
                    } else {
                        console.log('提交失败，请检查表单数据是否符合要求!!');
                        return false;
                    }
                });
            },
            //修改二级分类
            goodsTypeEdit(row) {
                this.axios.get(this.$baseUrl+"/goodsType/findById",{
                    params:{
                        goodsTypeId:row.goodsTypeId
                    }
                }).then((res)=>{
                    if(res.data.code==200){
                        this.modGoods = res.data.data;
                    }
                    this.modGoodsView = true;
                })
            },
            modGoodsType(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let url = this.$baseUrl+"/goodsType/modify";
                        this.axios.put(url,JSON.stringify(this.modGoods)).then((res)=>{
                            if(res.data.code==200){
                                this.$message({
                                    message: res.data.message,
                                    type: 'success',
                                });
                            }
                            this.findAll();
                            this.$refs[formName].resetFields();
                            this.modGoodsView = false;
                        })
                    } else {
                        console.log('提交失败，请检查表单数据是否符合要求!!');
                        return false;
                    }
                });
            },
            //批量删除二级分类
            removeAll2(){
                if(!this.goodsIds==''){
                    if(confirm('确认要删除吗？')){
                        this.axios.delete(this.$baseUrl+"/goodsType/removeAll",{
                            params:{
                                ids:this.goodsIds,
                            }
                        }).then((res)=>{
                            if(res.data.code==200){
                                this.$message({
                                    message: res.data.message,
                                    type: 'success',
                                });
                                this.findAll();
                            }
                        })
                    }else{
                        this.goodsIds = "";
                    }
                }else{
                    this.$message.error("请选择至少一条信息")
                }

            },
            //单个删除
            goodsTypeDelete(row){
                this.goodsIds = row.goodsTypeId;
                console.log(this.goodsIds)
                this.removeAll2();
            },


            //添加品牌
            addBrandType(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let url = this.$baseUrl+"/brand/add";
                        this.axios.post(url,JSON.stringify(this.addBrand)).then((res)=>{
                            if(res.data.code==200){
                                this.$message({
                                    message: res.data.message,
                                    type: 'success',
                                });
                            }
                            this.findAll();
                            this.$refs[formName].resetFields();
                            this.addBrandView = false;
                        })
                    } else {
                        console.log('提交失败，请检查表单数据是否符合要求!!');
                        return false;
                    }
                });
            },
            //修改品牌
            brandEdit(row) {
                this.axios.get(this.$baseUrl+"/brand/findById",{
                    params:{
                        brandId:row.brandId
                    }
                }).then((res)=>{
                    if(res.data.code==200){
                        this.modBrand = res.data.data;
                    }
                    this.modBrandView = true;
                })
            },
            modBrandType(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let url = this.$baseUrl+"/brand/modify";
                        this.axios.put(url,JSON.stringify(this.modBrand)).then((res)=>{
                            if(res.data.code==200){
                                this.$message({
                                    message: res.data.message,
                                    type: 'success',
                                });
                            }
                            this.findAll();
                            this.$refs[formName].resetFields();
                            this.modBrandView = false;
                        })
                    } else {
                        console.log('提交失败，请检查表单数据是否符合要求!!');
                        return false;
                    }
                });
            },
            //批量删除品牌
            removeAll3(){
                if(!this.brandIds==''){
                    if(confirm('确认要删除吗？')){
                        this.axios.delete(this.$baseUrl+"/brand/removeAll",{
                            params:{
                                ids:this.brandIds,
                            }
                        }).then((res)=>{
                            if(res.data.code==200){
                                this.$message({
                                    message: res.data.message,
                                    type: 'success',
                                });
                                this.findAll();
                            }
                        })
                    }else{
                        this.brandIds = "";
                    }

                }else{
                    this.$message.error("请选择至少一条信息")
                }

            },
            //单个删除
            brandDelete(row){
                this.brandIds = row.brandId;
                console.log(this.brandIds)
                this.removeAll3();
            },
        }
    }
</script>

<style scoped>

</style>